import React, { useState, useEffect } from 'react'
// import axios from 'axios'
import './index.css'
import img1 from '../../../static/img/Search and Particulars/chongzhi.png'
import axios from 'axios'
import { aUrl } from '../../../static/axios_url'
import { message } from 'antd'
export default function Wallet() {
    const state = {
        balance: '￥20.0',
        money: [{ num: '500', ischeck: false }, { num: '1500', ischeck: false }, { num: '2000', ischeck: false },],
        ischocenum: ''
    }
    const [count, setCount] = useState({ balance: '', money: [] })
    //初始化金额
    const [wallet,setwallet] = useState(0)
    //挂载前调用初始化函数
    useEffect(() => {
        setCount(state)
        axios.post(aUrl + '/mycenter/myAccount', { id: 1 }).then((res) => {
            console.log(res.data);
            setwallet(res.data.wallet) 
        })
    }, [])
    //金额盒子背景变化
    function changecolor(i) {
        const changecolor = JSON.parse(JSON.stringify(count))
        if (changecolor.ischocenum === i) {
            changecolor.money[i].ischeck = !changecolor.money[i].ischeck
            setCount(changecolor)
        } else {
            for (let index = 0; index < changecolor.money.length; index++) {
                changecolor.money[index].ischeck = false
            }
            changecolor.ischocenum = i
            changecolor.money[i].ischeck = !changecolor.money[i].ischeck
            setCount(changecolor)
        }
    }
    //点击立即充值按钮
    function paynow() {
        const paynum = JSON.parse(JSON.stringify(count))
        const payinfor = paynum.money[paynum.ischocenum].num
        if (payinfor) {
            axios.post(aUrl + '/mycenter/myWallet', { wallet: payinfor, id: 1 }).then((res) => {
                if (res.data.code === 1) {
                    message.success('充值成功！！')
                    console.log(wallet,payinfor);
                    const money = wallet + Number(payinfor)
                    // console.log(money);
                    setwallet(money)
                }
            })
        } else {
            message.warning('请选择充值金额！！')
        }
    }
   
    return (
        <div>
            <h3 className='tt'>账户余额: <strong className='W-balance'> {wallet} </strong></h3>
            <div className="W-middle">
                <h3>请选择充值金额:</h3>
                {
                    count.money.map((v, i) => {
                        return (
                            <div className={v.ischeck ? 'c-money' : 'c-money2'} onClick={() => changecolor(i)} key={i}>{v.num}元</div>
                        )
                    })
                }
                <h3 className='c-pay'>充值有礼</h3>
                <div className="c-payimg">
                    <img src={img1} alt="" />
                </div>
                <div className="c-payimg">
                    <img src={img1} alt="" />
                </div>
                <div className="c-paynow" onClick={paynow}>立即充值</div>
            </div>
        </div>
    )
}
